<script setup lang='ts'>
type Props = {
    color: string
    size?: string
    updateMoney: (num: string) => void
}
//第一种写法
const Props = withDefaults(defineProps<Props>(), {
    size: '大大',

})

//第二种写法
// const Props = defineProps<{
//     color: string
//     size?: string
// }>()

const emit = defineEmits<{
    (e: 'changeColor', color: string): void
    (e: 'changeSize', color: string): void
}>()
const onBtnClick = () => {
    emit('changeColor', '委委屈屈')
}
</script>

<template>
    <div style="border:10px solid pink;width: 300px;height: 50px;">
        子组件-{{ color }}--{{ size }}
        <button @click="onBtnClick">修改颜色</button>
        <button @click="$emit('changeSize', '中中')">修改大小</button>
        <button @click="updateMoney('456')"></button>
    </div>
</template>

<style scoped></style>